<script setup>
</script>
<template>
  <div class="main" style="margin-top: 10px;">
    <!-- 图表区域 -->
    <div class="charts">
      <el-card class="chart-card trend">
        <template #header>
          <div class="chart-header">
            <span>用户活跃度趋势</span>
            <el-radio-group v-model="timeRange" size="small" @change="handleTimeRangeChange">
              <el-radio-button label="week">本周</el-radio-button>
              <el-radio-button label="month">本月</el-radio-button>
              <el-radio-button label="year">全年</el-radio-button>
            </el-radio-group>
          </div>
        </template>
        <div ref="trendChartRef" class="chart-container"></div>
      </el-card>

      <el-card class="chart-card distribution">
        <template #header>
          <div class="chart-header">
            <span>视频分类分布</span>
          </div>
        </template>
        <div ref="pieChartRef" class="chart-container"></div>
      </el-card>
    </div>
  </div>
</template>
<style scoped lang="scss">
.charts {
  display: flex;
  gap: 10px;

  .chart-card {
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }

  .trend {
    flex: 2;
    height: 400px;
  }

  .distribution {
    flex: 1;
    height: 400px;
  }
}
</style>
